<template>
  <el-aside width="200px" style="height: 100vh">
    <el-scrollbar>
      <el-menu :router="true" :default-active="route.fullPath" background-color=transparent>
        <el-menu-item v-if="user.role === 0" index="/home">
          <template #title>
            <el-icon>
              <HomeFilled />
            </el-icon>首页
          </template>
        </el-menu-item>
        <el-sub-menu v-if="user.role === 0" index="/study">
          <template #title>
            <el-icon><icon-menu /></el-icon>学习
          </template>
          <el-sub-menu index="/study/Recursion">
            <template #title>递归算法</template>
            <el-menu-item index="/study/recurhanoi"
              @click="handleClick('汉诺塔问题', '/study/recurhanoi')">汉诺塔问题</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/study/sort">
            <template #title>排序算法</template>
            <el-menu-item index="/study/sort/bubsort"
              @click="handleClick('冒泡排序', '/study/sort/bubsort')">冒泡排序</el-menu-item>
            <el-menu-item index="/study/sort/mergersort"
              @click="handleClick('归并排序', '/study/sort/mergersort')">归并排序</el-menu-item>
            <el-menu-item index="/study/sort/fastsort"
              @click="handleClick('快速排序', '/study/sort/fastsort')">快速排序</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/study/dp">
            <template #title>动态规划算法</template>
            <el-menu-item index="/study/dp/knapro"
              @click="handleClick('01背包问题', '/study/dp/knapro')">01背包问题</el-menu-item>
            <el-menu-item index="/study/dp/longcomsub"
              @click="handleClick('最长公共子序列', '/study/dp/longcomsub')">最长公共子序列</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/study/greedy">
            <template #title>贪心算法</template>
            <el-menu-item index="/study/greedy/asspro"
              @click="handleClick('硬币找零问题', '/study/greedy/asspro')">硬币找零问题</el-menu-item>
            <!-- <el-menu-item index="/study/greedy/setcovpro"
              @click="handleClick('活动安排问题', '/study/greedy/setcovpro')">活动安排问题</el-menu-item> -->
          </el-sub-menu>
          <el-sub-menu index="/study/search">
            <template #title>查找算法</template>
            <el-menu-item index="/study/search/binarysearch"
              @click="handleClick('二分查找', '/study/search/binarysearch')">二分查找</el-menu-item>
            <!-- <el-menu-item index="/study/search/InterpolationSearch"
              @click="handleClick('插值查找', '/study/search/InterpolationSearch')">插值查找</el-menu-item> -->
          </el-sub-menu>
          <el-sub-menu index="/study/graph">
            <template #title>图算法</template>
            <el-sub-menu index="/study/graph/shortest-path">
              <template #title>最短路径</template>
              <el-menu-item index="/study/graph/shortest-path/dijkstra"
                @click="handleClick('Dijkstra算法', '/study/graph/shortest-path/dijkstra')">Dijkstra算法</el-menu-item>
              <el-menu-item index="/study/graph/shortest-path/floyd"
                @click="handleClick('Floyd算法', '/study/graph/shortest-path/floyd')">Floyd算法</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/study/graph/min-span-tree">
              <template #title>最小生成树</template>
              <el-menu-item index="/study/graph/min-span-tree/kruskal"
                @click="handleClick('Kruskal算法', '/study/graph/min-span-tree/kruskal')">Kruskal算法</el-menu-item>
              <el-menu-item index="/study/graph/min-span-tree/prim"
                @click="handleClick('Prim算法', '/study/graph/min-span-tree/prim')">Prim算法</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="/study/Backtracking">
            <template #title>回溯算法</template>
            <el-menu-item index="/study/n-queen-question"
              @click="handleClick('N皇后问题', '/study/n-queen-question')">N皇后问题</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item v-if="user.role === 0" index="/comment">
          <template #title>
            <el-icon>
              <Comment />
            </el-icon>交流
          </template>
        </el-menu-item>
        <el-menu-item v-if="user.role === 0" index="/center">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>我的
          </template>
        </el-menu-item>
        <!-- 管理员权限 -->
        <el-menu-item v-if="user.role === 1" index="/users">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>用户中心
          </template>
        </el-menu-item>
        <el-sub-menu v-if="user.role === 1" index="/approval">
          <template #title>
            <el-icon>
              <SuccessFilled />
            </el-icon>审批中心
          </template>
          <el-menu-item index="/approval/users">用户信息审批</el-menu-item>
          <el-menu-item index="/approval/comments">用户评论审批</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<style scoped>
/*.el-aside {
       background-color: slategrey;
  }*/
</style>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
const route = useRoute();
import { Menu as IconMenu, UserFilled, HomeFilled, Comment, SuccessFilled } from '@element-plus/icons-vue'
import { useUserStore } from "../store/useUserStore.js";
import { storeToRefs } from "pinia";
import axios from "axios";

const userStore = useUserStore();
const { user } = storeToRefs(userStore);
// 初始化
onMounted(() => {
  getStuduedAlgList(user.value.user_name);
})
// 已学算法
const addForm = ref({
  user_name: user.value.user_name,
  alg_name: "",
  alg_url: "",
})
// 获取已学算法
const studiedAlgList = ref([{ alg_name: "", alg_url: "", user_name: "", }]);
const getStuduedAlgList = async (user_name: string) => {
  await axios.get(`/oasadapi/algorithms/search`, { params: { user_name: user_name } }).then((res) => {
    studiedAlgList.value = res.data;
  })
}
//添加已学算法
const handleClick = (name: string, index: string) => {
  console.log(studiedAlgList.value);
  if (studiedAlgList.value.findIndex(item => item.alg_name == name) === -1) {
    addForm.value.alg_name = name;
    addForm.value.alg_url = index;
    axios.post('/oasadapi/algorithms', addForm.value).then(() => {
      addForm.value.alg_name = "";
      addForm.value.alg_url = "";
    }).catch(() => {
      console.log("数据上传失败");
    })
    getStuduedAlgList(user.value.user_name);
  } else {
    console.log("该算法已经学习过了");
  }
}
</script>